<!-- 首页 => 分析页 -->
<template>
  <div class="analysispage wh-100">
    <!-- 顶部图标 -->
    <div class="top-charts">
      <TopCharts />
    </div>
    <!-- 数据趋势 -->
    <div class="flowanalysis">
      <FlowAnalysis />
    </div>
    <!-- 库存+商品排行 -->
    <div class="inventory-rankingbox">
      <div class="inventorybox">
        <InventoryComp />
      </div>
      <div class="rankingbox">
        <RankingComp />
      </div>
    </div>
    <div>1</div>
  </div>
</template>

<script>
import TopCharts from "@/views/homepage/topCharts/TopCharts.vue";
import FlowAnalysis from "@/views/homepage/flowAnalysis/FlowAnalysis.vue";
import InventoryComp from "@/views/homepage/inventory/InventoryComp.vue";
import RankingComp from "@/views/homepage/inventory/RankingComp.vue";
export default {
  name: "AnalysisPage",
  components: {
    TopCharts,
    FlowAnalysis,
    InventoryComp,
    RankingComp,
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.flowanalysis {
  margin: 20px 30px 0 10px;
}
// 商品库存 + 商品排行样式
.inventory-rankingbox {
  margin: 80px 0px 100px 0px;
  padding: 0px 26px 0px 12px;
  box-sizing: border-box;
  width: 100%;
  height: 360px;
  display: flex;
  justify-content: space-between;

  .inventorybox {
    width: 300px;
    height: 100%;
    background: #fff;
    margin-right: 15px;
  }
  .rankingbox {
    flex: 1;
    height: 100%;
    background: #fff;
  }
}
</style>
